<template>
    <label class="selectinput" 
        :style="`width:${width}px;height:${height}px;line-height:${height}px`" >
        <span class="selectinput-label" :style="`width:${width-10}px;`" v-html="title"></span>
        <!-- <span class="selectinput-txt">{{txt}}</span> -->
        <input v-model="txt" />
        <select :value="v" @input="change($event.target.value)">
            <option :key="i" v-for="(opt,i) in options" v-bind:value="opt.value">{{opt.title}}</option>
        </select>
    </label>
</template>
<script>
export default {
    name: "selectInput", 
    computed:{
        txt(){
            var selecteds=this.options.filter(row=>row.value === this.value);
            // console.log('selectInput:',this.value,selecteds);
            if(selecteds.length>0){
                var txt=''
                selecteds.forEach(e=>{txt+=e.title;});
                return txt;
            }
            return '请选择';
        },
        v(){
            return this.value;
        }
    },
    props:{
        width:{type:Number,default:()=>{return 90}},
        height:{type:Number,default:()=>{return 70}},
        value:{type:[String,Number,Boolean],default:()=>{return ''}},
        title:{type:String,default:()=>{return '选择'}},
        options:{type:Array,default:()=>{return []}}      
    },   
    methods:{       
        change:function(v){            
            if(typeof(this.value) === 'number' && !isNaN(v)){
                this.$emit('input',Number(`${v}`));         
                this.$emit('change',Number(`${v}`));
            }else if(typeof(this.value) === 'boolean'){
                var strVal=`${v}`.toLowerCase();                
                this.$emit('input',strVal === '1' || strVal === 'true');         
                this.$emit('change',strVal === '1' || strVal === 'true');
            }else if(typeof(this.value) === 'string'){
                this.$emit('input',v);         
                this.$emit('change',v);
            }
        }
    }

}
</script>
<style lang="scss" scoped>
.selectinput {
    background: #3f3f3c;
    border-radius: 3px;
    -webkit-font-smoothing: antialiased;    
    display: block;
    position: relative;
    float: left;
    margin: 5px 0 0 5px;
    color: #ccc;
    text-align: center;
    user-select: none;
    overflow: hidden;
}


.selectinput select {
    border: none;
    background: transparent;
    font: 14px/normal sans-serif;
    text-align: center;
    color: #00000000;
    padding: 30px 0 16px;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
}

.selectinput select option{
    color:#000000;
    font: 15px/normal sans-serif;
}
.selectinput select, .selectinput select:hover, .selectinput select:active {    
    cursor: -webkit-grab;
    cursor: -moz-grab;
    outline: none;
}
.selectinput-label {
    font: 11px/130% sans-serif;
    color: #ccc;
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    text-align: left;
}

.selectinput-txt{
    border: none;
    background: transparent;
    font: 18px/normal sans-serif;
    text-align: center;
    color: #ffffff;
    padding: 30px 0 16px;
    width: 100%;
    height: 24px;
    position: relative;      
}

.selectinput input {
    border: none;
    background: transparent;
    font: 20px/normal sans-serif;
    text-align: center;
    color: #4F80FF;
    padding: 30px 0 16px;
    width: 100%;
    height: 24px;
    position: relative;
}

</style>